<template>
  <el-dialog :close-on-click-modal="false" :title="`${mode === 'add' ? '新增' : '修改'}拖轮信息`" width="800px" v-model="visible" @confirm="confirm"
    @cancel="visible = false" @close="closeDialog">
    <div class="formData">
      <el-form :model="formData" ref="ruleForm" label-width="100px" :rules="rules">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="拖轮名称" prop="tugName">
              <el-input v-model="formData.tugName" placeholder="请填写拖轮名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拖轮编号" prop="tugNo">
              <el-input v-model="formData.tugNo" placeholder="请填写拖轮编号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="拖轮状态" prop="staus">
			  <el-select v-model="formData.staus" placeholder="请选择拖轮状态">
			  	<el-option v-for="item in selects.staus" :key="item.value" :label="item.label"
			  		:value="item.value" />
			  </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拖轮类型" prop="tugTypeCode">
				<!-- <el-select v-model="formData.tugTypeCode" placeholder="请选择拖轮类型">
					<el-option v-for="item in selects.tugTypeCode" :key="item.value" :label="item.label"
						:value="item.value" />
				</el-select> -->
				<Select placeholder="请选择拖轮类型" :dataConfig="{ params: { type: 'DICT',dictType:'TUG_TYPE' } }" v-model:value="formData.tugTypeCode" v-model:label="formData.tugTypeName"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="注册港" prop="registryPort">
              <el-input v-model="formData.registryPort" placeholder="请填写注册港" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经营人" prop="operator">
              <el-input v-model="formData.operator" placeholder="请填写经营人" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
              <el-form-item label="所有人" prop="owner">
                <el-input v-model="formData.owner" placeholder="请填写所有人" />
              </el-form-item>
            </el-col>
          <el-col :span="12">
            <el-form-item label="建造日期" prop="buildDate">
              <el-date-picker v-model="formData.buildDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择建造日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="建造厂家" prop="buildFactory">
              <el-input v-model="formData.buildFactory" placeholder="请填写建造厂家" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="IMO" prop="imo">
              <el-input v-model="formData.imo" placeholder="请填写IMO" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="呼号" prop="callNo">
              <el-input v-model="formData.callNo" placeholder="请填写呼号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="船舶识别号" prop="idNo">
              <el-input v-model="formData.idNo" placeholder="请填写船舶识别号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="船舶登记号" prop="regNo">
              <el-input v-model="formData.regNo" placeholder="请填写船舶登记号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总长" prop="tugLength">
              <el-input v-model="formData.tugLength" placeholder="请填写总长" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="型宽" prop="tugWidth">
              <el-input v-model="formData.tugWidth" placeholder="请填写型宽" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型深" prop="tugDepth">
              <el-input v-model="formData.tugDepth" placeholder="请填写型深" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="主机功率" prop="power">
              <el-input v-model="formData.power" placeholder="请填写主机功率" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="马力" prop="horsepower">
              <el-input v-model="formData.horsepower" placeholder="请填写马力" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="总吨" prop="totalTon">
              <el-input v-model="formData.totalTon" placeholder="请填写总吨" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="净吨" prop="netTon">
              <el-input v-model="formData.netTon" placeholder="请填写净吨" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="满载吃水" prop="draftFull">
              <el-input v-model="formData.draftFull" placeholder="请填写满载吃水" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="空载吃水" prop="draftEmpty">
              <el-input v-model="formData.draftEmpty" placeholder="请填写空载吃水" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <!-- <el-col :span="12">
            <el-form-item label="作业港区" prop="portAreaCode">
				<Select placeholder="请选择作业港区" disabled :dataConfig="{ params: { type: 'DICT',dictType:'PORT_AREA' } }" v-model:value="formData.portAreaCode" v-model:label="formData.portAreaName"/>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
				<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
	<template #footer>
	      <div class="dialog-footer">
	        <el-button @click="closeDialog">取消</el-button>
	        <el-button type="primary" @click="confirm">
	          确认
	        </el-button>
	      </div>
	    </template>
  </el-dialog>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		defineEmits,
		defineExpose,
		nextTick
	} from "vue";
	import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import Select from '@/components/Select/index.vue'
import api from '@/api/basicData/tug/index'
const emit = defineEmits(['callback'])

const selects = ref({
		staus: [{
				label: '适航',
				value: 0
			},
			{
				label: '不适航',
				value: 1
			},
			{
				label: '停修',
				value: 2
			}
		],
	})

const visible = ref(false)
const mode = ref('add')
const row = ref({})
const formData = ref({
    tugNo:'',
    tugName:'',
    staus:'',
    tugTypeCode:'',
    registryPort:'',
    operator:'',
    owner:'',
    buildDate:'',
    buildFactory:'',
    imo:'',
    callNo:'',
    idNo:'',
    regNo:'',
    tugLength:'',
    tugWidth:'',
    tugDepth:'',
    power:'',
    horsepower:'',
    totalTon:'',
    netTon:'',
    draftFull:'',
    draftEmpty:'',
    portAreaCode:'04',
	remark:''
  })
  const ruleForm = ref({})
  const validateAmount = (rule, value, callback) => {  
	  if (!value) {
		  return callback()
		}
      // 使用正则表达式校验小数点后是否只有两位  
      if (!/^-?\d+(\.\d{1,2})?$/.test(value)) {  
        callback(new Error('请输入数字'));  
      } else {  
        // 注意：这里可能还需要进一步处理，确保末尾不是".00"之类的，但为简化示例，暂不处理  
        callback();  
      }  
    }
  const rules = ref({
    tugName: [
		{ required: true, message: '不能为空', trigger: 'blur' },
		{ min: 4, max: 20, message: '长度为4-20个字符', trigger: 'blur' },
	],
    tugNo: [
		{ required: true, message: '不能为空', trigger: 'blur' },
		{ min: 4, max: 20, message: '长度为4-20个字符', trigger: 'blur' },
	],
    staus: [
		{ required: true, message: '不能为空', trigger: 'blur' }
	],
    tugTypeCode: [
		{ required: true, message: '不能为空', trigger: 'blur' }
	],
    tugLength: [
		{ validator: validateAmount, trigger: 'blur' },
	],
    tugWidth: [
		{ validator: validateAmount, trigger: 'blur' }
	],
    tugDepth: [
		{ validator: validateAmount, trigger: 'blur' }
	],
    totalTon: [
		{ validator: validateAmount, trigger: 'blur' }
	],
    netTon: [
		{ validator: validateAmount, trigger: 'blur' }
	],
    draftFull: [
		{ validator: validateAmount, trigger: 'blur' }
	],
    draftEmpty: [
		{ validator: validateAmount, trigger: 'blur' }
	],
    portAreaCode: [
		{ required: true, message: '不能为空', trigger: 'blur' }
	]
  })
// 展示
const show = params => {
	console.log(params);
  visible.value = true
  mode.value = params?.mode || 'add'
  if (mode.value === 'edit') {
    row.value = params.row
    editInit()
  }
}
// 编辑
const editInit = async () => {
  const { data } = await api.getDetailById(row.value.id)
  formData.value = { ...data }
}
// 确认
const confirm = () => {
  ruleForm.value.validate(valid => {
    if (valid) {
		let request
		if (mode.value === 'add') {
		  request = api.save
		  delete formData.value.id
		} else {
		  request = api.update
		}
		request(formData.value).then(res => {
		  if (res.code == '200') {
		    ElMessage.success('保存成功')
		    visible.value = false
		    emit('callback')
		  } else {
		    ElMessage.error(res.msg)
		  }
		})
    } else {
      ElMessage.warning('请完善表单信息！')
    }
  })
}

// 重置
const closeDialog = () => {
  nextTick(() => {
    visible.value = false
    ruleForm.value.resetFields()
  })
}
defineExpose({
  show
})
</script>
